layui.use(['table','form','layer','laydate','tree','util'], function () {
    const table = layui.table;
    const form = layui.form;
    const $=layui.jquery
    const layer=layui.layer;
    const laydate=layui.laydate;
    const tree=layui.tree;
    const util=layui.util;
    table.render({
        elem: '#userTable'
        , url: '/role/list' //数据接口
        , page: true //开启分页
        , cols: [[
            {field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left'}
            , {field: 'name', title: '姓名'}
            , {title: "操作", templet: "#operateTemplate"}
        ]]
        ,limits: [1,5, 10, 15, 20],

    });




    // 监听搜索操作
    form.on('submit(searchBtn)', function (data) {
        var result = JSON.stringify(data.field);
        //执行搜索重载
        table.reload('userTable', {
            page: {
                curr: 1
            }
            , where: {
                condition: result
            },
        });

        return false;
    });
    //监听行工具事件
    table.on('tool(userTable)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
        var data = obj.data //获得当前行数据
            ,layEvent = obj.event; //获得 lay-event 对应的值
        if(layEvent === 'role'){
            var id=obj.data.id
            layer.open({
                type: 1,
                content: $('#userRoleTemplate').html(), //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                skin: 'layui-layer-rim', //加上边框
                area: ['600px', '600px'], //宽高
            });
            $.ajax({
                url: "/menu/getTree",
                type: 'get',
                data:{
                    'id':id
                },
                success: function (data) {
                    console.log(data)
                    if(data.code==200){
                        let t=data.data;
                        var inst1 = tree.render({
                            elem: '#menuTree'  //绑定元素
                            ,showCheckbox: true  //是否显示复选框
                            ,data:t
                            ,id: 'demoId' //定义索引
                            ,oncheck: function(obj){
                                console.log(obj.data); //得到当前点击的节点数据
                                console.log(obj.checked); //得到当前节点的展开状态：open、close、normal

                                var children=""
                                if(obj.data.children!=null){
                                    for(var i=0;i<obj.data.children.length;i++){
                                        children+=obj.data.children[i].id+",";
                                    }
                                }
                                console.log(children.substr(0,children.length-1))
                                children=children.substr(0,children.length-1)
                                $.ajax({
                                    url: "/role_menu/add",
                                    type: 'post',
                                    data:{
                                        'mid':obj.data.id,
                                        'children':children,
                                        'f':obj.checked,
                                        'rid':id,

                                    },
                                    success: function (data) {
                                        console.log(data)
                                        if(data.code==200){
                                            let t=data.data;



                                        }

                                    },

                                })


                            }
                        });



                    }

                },

            })


        } else if(layEvent === 'edit'){
            var id = obj.data.id;
            console.log(id)
            $.ajax({
                url: "/role/getOne",
                type: 'post',
                data: {
                    'id':id
                },
                success: function (data) {
                    console.log(data)
                    if(data.code==200){
                        let user=data.data;
                        console.log(user)
                        layer.open({
                            type: 1,
                            title: '修改用户',
                            content: $('#userFormTemplate').html(), //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                            skin: 'layui-layer-rim', //加上边框
                            area: ['600px', '600px'], //宽高
                        });
                        setFormValue(user);

                    }else{

                    }

                },

            })

        }else if(layEvent ==='del'){
            var id = obj.data.id;
            layer.confirm('确认要删除吗？',function(index){
                $.ajax({
                    url: "/role/delete",
                    type: 'post',
                    data: {
                        'id':id
                    },
                    success: function (data) {
                        console.log(data)
                        if(data.code==200){
                            layer.msg('已删除!',{icon:1,time:1000});
                            $("#searchBtn").click();
                        }else if(data.code==500){
                            layer.alert(data.msg, {
                                icon: 5
                            })
                        }
                    },
                })
            });
        }
    });
    function setFormValue(user){
        console.log(user)
        form.val("userForm", {
            "id":user.id
            ,"name": user.name

        });
        form.render(null,'userForm')
        laydate.render({
            elem: "#biryhday"
        })
    }


    $('body').on('click',"#saveBtn" ,function () {
        var info = form.val("userForm");
        console.log(info);
        $.ajax({
            url: "/role/saveOrUpdate",
            type: 'post',
            data: info,
            success: function (data) {
                console.log(data)
                if(data.code==200){
                    layer.alert("新增或修改成功", {
                            icon: 6
                        },
                        function() {
                            layer.closeAll();
                            $("#searchBtn").click();
                        });

                }else{
                    layer.alert("新增或修改失败", {
                        icon: 5
                    })
                }

            },

        })
    })
    $('#addBtn').on('click',function() {
        layer.open({
            type: 1,
            title: '新增角色',
            content: $('#userFormTemplate').html(), //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
            skin: 'layui-layer-rim', //加上边框
            area: ['600px', '600px'], //宽高
        });
        form.render();


    })


//渲染


});
